<nav
  class="navbar navbar-expand-lg navbar-light bg-light fixed-top"
  [class.navbar-dark]="activeDemo?.darkTheme"
  [class.bg-dark]="activeDemo?.darkTheme"
  role="navigation"
>
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Angular 20.2+ calendar</a>

    <button
      type="button"
      class="navbar-toggler"
      (click)="isMenuVisible = !isMenuVisible"
    >
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" [ngbCollapse]="!isMenuVisible">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item active">
          <a class="nav-link" href="javascript:;">
            <i class="fas fa-laptop"></i> Demos
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            href="https://github.com/mattlewis92/angular-calendar#getting-started"
          >
            <i class="fas fa-map-pin"></i> Getting started
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            href="https://mattlewis92.github.io/angular-calendar/docs/"
          >
            <i class="fas fa-book"></i> API docs
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            data-formkit-toggle="7c1627e655"
            href="javascript:;"
            (click)="isMenuVisible = false"
          >
            <i class="fas fa-fw fa-envelope"></i>Subscribe
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link text-danger"
            href="https://github.com/users/mattlewis92/sponsorship"
            target="_blank"
          >
            <i class="fas fa-dollar-sign"></i> Donate
          </a>
        </li>
      </ul>
      <ul class="nav navbar-nav ml-md-auto">
        <li class="nav-item">
          <a
            class="nav-link"
            href="https://www.npmjs.com/package/angular-calendar"
            target="_blank"
            [ngbTooltip]="'View on npm'"
          >
            <i class="fab fa-lg fa-npm"></i>
            <span class="d-lg-none">View on npm</span>
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            href="https://github.com/mattlewis92/angular-calendar"
            target="_blank"
            [ngbTooltip]="'View on GitHub'"
          >
            <i class="fab fa-lg fa-github"></i>
            <span class="d-lg-none">View on GitHub</span>
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link text-primary"
            href="https://twitter.com/mattlewis92_"
            target="_blank"
            [ngbTooltip]="'Follow me on Twitter'"
          >
            <i class="fab fa-lg fa-twitter"></i>
            <span class="d-lg-none">Follow me on Twitter</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid main-content">
  <div class="row fill-height">
    <div
      class="col fill-height scroll-y demo-container"
      mwlDraggableScrollContainer
    >
      @if (firstDemoLoaded) {
      <div class="card">
        <div class="card-header">
          <div class="row">
            <div class="col-md-6"><h3>{{ activeDemo.label }}</h3></div>
            <div class="col-md-6">
              <button
                class="btn btn-info float-end"
                (click)="editInStackblitz(activeDemo)"
              >
                <i class="fas fa-edit"></i> Edit in Stackblitz
              </button>
            </div>
          </div>
        </div>
        <div class="card-body">
          <ul ngbNav #nav="ngbNav" class="justify-content-start nav-tabs">
            <li ngbNavItem domId="demo">
              <a ngbNavLink><i class="fas fa-fw fa-laptop"></i> Live demo</a>
              <ng-template ngbNavContent>
                <div class="spacer-top"><router-outlet /></div>
              </ng-template>
            </li>

            @for (source of activeDemo?.sources; track source.filename) {
            <li ngbNavItem>
              <a ngbNavLink>
                <span>
                  @switch (source.language) { @case ('xml') {
                  <i class="fab fa-fw fa-html5"></i>
                  } @case ('css') {
                  <i class="fab fa-fw fa-css3"></i>
                  } @case ('scss') {
                  <i class="fab fa-fw fa-css3"></i>
                  } @default {
                  <i class="fas fa-fw fa-code"></i>
                  } }
                </span>
                {{ source.filename }}
              </a>
              <ng-template ngbNavContent>
                <div class="code-container">
                  <button
                    class="btn btn-outline-primary copy-code"
                    (click)="copied()"
                    ngxClipboard
                    [cbContent]="source.contents.raw"
                    [ngbTooltip]="'Copy source'"
                    [placement]="'top-right'"
                  >
                    <i
                      class="fa"
                      [ngClass]="{'fa-copy': (copied$ | async) !== true, 'fa-check': (copied$ | async) }"
                    ></i>
                  </button>
                  <pre><code [innerHTML]="source.contents.highlighted"></code></pre>
                </div>
              </ng-template>
            </li>
            }
          </ul>
          <div [ngbNavOutlet]="nav"></div>
        </div>
      </div>
      } @else {

      <div class="card">
        <div class="card-body text-center">
          <i class="fas fa-spin fa-spinner fa-5x"></i> <br />
          Loading demo...
        </div>
      </div>

      }
    </div>
    <div class="fill-height sidebar-nav scroll-y">
      <mwl-carbon-ad />
      <input
        type="search"
        class="form-control"
        placeholder="Search demos..."
        [(ngModel)]="searchText"
        (ngModelChange)="updateFilteredDemos()"
      />
      <ul class="list-unstyled spacer-top">
        @for (demo of filteredDemos; track demo) {
        <li>
          <a
            [routerLink]="[demo.path]"
            [class.active]="activeDemo?.path === demo.path"
            (click)="nav.select('demo')"
          >
            {{ demo.label }}
          </a>
        </li>
        }
      </ul>
      @if (filteredDemos.length === 0) {
      <em>No matching demos found</em>
      }
    </div>
  </div>
</div>
